<template>
    <div>
        <div class="chart-wrapper" ref="chartBox" v-show="rate" style="width: 100rem; height: 100rem"></div>
        <el-empty description="暂无数据" v-show="!rate" :image-size="60" />
    </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref, watch, nextTick } from "vue";
import * as echarts from 'echarts'
import { debounce, nowSize } from "@/utils/util.js"
import { ElLoading, ElMessage } from "element-plus";

const chartBox = ref()
let myChart = ref(null)


// 传入数据
const props = defineProps({
    rate: Number, // 横坐标名称

})

const resizeHandler = debounce(() => {
    if (myChart) {
        myChart.resize()
    }
}, 200)

onMounted(() => {
    setTimeout(() => {
        getChartData()
    }, 1000)
    window.addEventListener("resize", resizeHandler)
})

onBeforeUnmount(() => {
    window.removeEventListener("resize", resizeHandler)
})

watch(() => props.chartData, (newVal, oldVal) => {
    getChartData()
})

const getChartData = () => {


    nextTick(() => {
        initEcharts()
    })

}

const initEcharts = () => {
    myChart = echarts.init(chartBox.value)
    let option = {
        grid: {
            top: '0%',
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
        },
        axisLine: {
            lineStyle: {
                color: "#ebf5ff"
            }
        },
        series: [
            {
                type: 'gauge',
                startAngle: 90,
                endAngle: -270,
                pointer: {
                    show: false
                },
                progress: {
                    show: true,
                    overlap: false,
                    roundCap: true,
                    clip: false,
                    itemStyle: {
                        color: {
                            type: "linear",
                            x: 0,
                            y: props.orient === "horizontal" ? 1 : 0,
                            x2: props.orient === "horizontal" ? 0 : 1,
                            y2: 0,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "#3dbaed"
                                },
                                {
                                    offset: 0.5,
                                    color: "#82e0bb"
                                },
                                {
                                    offset: 1,
                                    color: "#3dbaed"
                                },
                            ],
                            global: false,
                        },
                    }
                },
                axisLine: {
                    lineStyle: {
                        width: nowSize(7)
                    }
                },
                splitLine: {
                    show: false,
                    distance: 0,
                    length: 10
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false,
                    distance: 50
                },
                data: [
                    {
                        value: props.rate,
                        // name: 'Perfect',
                        title: {
                            offsetCenter: ['0%', '-30%']
                        },
                        detail: {
                            valueAnimation: true,
                            offsetCenter: ['0%', '0']
                        }
                    }
                ],
                title: {
                    fontSize: nowSize(14)
                },
                detail: {
                    width: 50,
                    height: 14,
                    fontSize: nowSize(14),
                    fontWeight: 'bold',
                    color: '#369eff',
                    formatter: '{value}%'
                }
            }
        ]
    }
    if (props.option) {
        option = Object.assign(option, props.option);
    }
    myChart.off("click");
    // myChart.on("click", function (params) {
    //     that.$emit("clickEchartIns", params); // 所选参数
    // });
    myChart.setOption(option, true)
}



</script>

<style scoped lang="less"></style>
